import { defineComponent } from 'vue';
import Caption from './Caption.vue';
import ContextMenu from './ContextMenu.vue';
import CustomImageStyle from './CustomImageStyle.vue';
import ErrorState from './ErrorState.vue';
import Fas from './Fas.vue';
import FitModes from './FitModes.vue';
import LoadingLazy from './LoadingLazy.vue';
import LoadingState from './LoadingState.vue';
import PlaceholderSrc from './PlaceholderSrc.vue';
import Ratio from './Ratio.vue';
import Responsive from './Responsive.vue';

export default defineComponent({
	name: 'App',
	props: {},
	emits: [],

	setup(props, { attrs, emit, expose, slots }) {
		expose({});

		return () => {
			return (
				<div class='block'>
					<div class='block-'>
						<h5 class='title'>低代码属性测试</h5>
						<Fas />
					</div>
					<div class='block-'>
						<h5 class='title'>Caption</h5>
						<Caption />
					</div>
					<div class='block-'>
						<h5 class='title'>ContextMenu</h5>
						<ContextMenu />
					</div>
					<div class='block-'>
						<h5 class='title'>CustomImageStyle</h5>
						<CustomImageStyle />
					</div>
					<div class='block-'>
						<h5 class='title'>ErrorState</h5>
						<ErrorState />
					</div>
					<div class='block-'>
						<h5 class='title'>FitModes</h5>
						<FitModes />
					</div>
					<div class='block-'>
						<h5 class='title'>LoadingLazy</h5>
						<LoadingLazy />
					</div>
					<div class='block-'>
						<h5 class='title'>LoadingState</h5>
						<LoadingState />
					</div>
					<div class='block-'>
						<h5 class='title'>PlaceholderSrc</h5>
						<PlaceholderSrc />
					</div>
					<div class='block-'>
						<h5 class='title'>Ratio</h5>
						<Ratio />
					</div>
					<div class='block-'>
						<h5 class='title'>Responsive</h5>
						<Responsive />
					</div>
				</div>
			);
		};
	},
});
